// 柱状图
$.ajax({
    url:"cqjc/tubiaoT.html",
    type:"post",
    dataType:"json",
    success:function (json){
        var myChart = echarts.init(document.getElementById('main'));
        var dataAxis =[];
        var data = [];


        $.each(json,function(index,item){
            dataAxis.push(item.insect);
            data.push(item.insectNumber);
        });


        var yMax = 3000;
        var dataShadow = [];

        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }

        option = {
            title: {
                text: ' ',
                subtext: ' '
            },
            grid: {
                x: '10%',
                x2: '10%',
                y: '10%',
                y2: '15%'
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                { // For shadow
                    type: 'bar',
                    itemStyle: {
                        normal: {color: 'rgba(0,0,0,0.05)'}
                    },
                    barGap:'-100%',
                    barCategoryGap:'40%',
                    data: dataShadow,
                    animation: false
                },
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: data
                }
            ]
        };

// Enable data zoom when user click bar.
        var zoomSize = 6;
        myChart.on('click', function (params) {
            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            myChart.dispatchAction({
                type: 'dataZoom',
                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            });
        });
// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    error:function(errorMsg){alert("请求数据失败");}

});

// 散点图


// 基于准备好的dom，初始化echarts实例
$.ajax({
    url:"cqjc/tubiaoB.html",
    type:"post",
    dataType:"json",
    success:function(json){




        var myChart = echarts.init(document.getElementById('main2'));


        var schema = [
            {name: 'date', index: 0, text: '日'},
            {name: 'insect', index: 1, text: '数量(头)'},
            {name: 'density', index: 2, text: '密度(头/亩)'}

        ];


        var itemStyle = {
            normal: {
                opacity: 0.8,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        };

        option = {

            color: [
                '#dd4444', '#fec42c', '#80F1BE'
            ],
            legend: {

                y: '5%',
                data: [],
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            grid: {
                x: '10%',
                x2: '10%',
                y: '10%',
                y2: '15%'
            },
            tooltip: {
                padding: 10,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj.value;
                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + obj.seriesName + ' ' + value[0] + '日：'

                        + '</div>'
                        + schema[1].text + '：' + value[1] + '<br>'
                        + schema[2].text + '：' + value[2] + '<br>';
                }
            },
            xAxis: {
                type: 'value',
                name: '日期',
                nameGap: 16,
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                max: 31,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#eee'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: ' ',
                nameLocation: 'end',
                nameGap: 20,
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 16
                },
                axisLine: {
                    lineStyle: {
                        color: '#eee'
                    }
                },
                splitLine: {
                    show: false
                }
            },
            visualMap: [
                {
                    right: '0%',
                    top: '10%',
                    dimension: 2,
                    min: 0,
                    max: 250,
                    itemWidth: 0,
                    itemHeight: 120,
                    calculable: false,
                    precision: 0.1,

                    textGap: 30,
                    textStyle: {
                        color: '#fff'
                    },
                    inRange: {
                        symbolSize: [10, 70]
                    },
                    outOfRange: {
                        symbolSize: [10, 70],
                        color: ['rgba(255,255,255,.2)']
                    },
                    controller: {
                        inRange: {
                            color: ['#c23531']
                        },
                        outOfRange: {
                            color: ['#444']
                        }
                    }
                },

            ],
            series: []
        };


        var jsonName = JSON.parse(json.name);
        $.each(jsonName,function(index,item){
            option.legend.data.push(item.insect);
        });

        var jsonName1 = JSON.parse(json.name);
        $.each(jsonName1,function(index,item){
            var newArray={};
            newArray.name=item.insect;
            newArray.type='scatter';
            newArray.itemStyle=itemStyle;
            newArray.data=[];
            option.series.push(newArray);
        });
        var jsonAll = JSON.parse(json.all);
        $.each(jsonAll,function(index,item){
            var a=[];
            var b=[];
            for(var i=0;i<option.series.length;i++){
                if(item.insect==option.series[i].name){
                    b.push(item.oBservationTime);
                    b.push(item.insectNumber);
                    b.push(item.density);
                    a.push(b);
                    option.series[i].data.push(b);
                }
            }


        });

// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    error:function(errorMsg){alert("请求数据失败");}

});